<template>
	<view class="content">
		<view style="background-color: white; border-radius: 10px; padding: 20px; width: 600rpx">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" prop="name"><u-input class="input" v-model="form.name" /></u-form-item>
				<u-form-item label="性别" prop="sex">
					<u-radio-group v-model="defaultSex">
						<u-radio v-for="(item, index) in sexList" :key="index" :disabled="item.disabled" @change="radioChange(item)" :name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="头像" prop="avatar">
					<view style="margin-left: auto;" @click="chose_avatar()"><u-avatar :src=avatarImg ></u-avatar></view>
				</u-form-item>
				<u-form-item label="班级" prop="class"><u-input v-model="form.class" /></u-form-item>
				<u-form-item label="账号" prop="accountNum"><u-input type="number" v-model="form.accountNum" /></u-form-item>
				<u-form-item label="密码" prop="password"><u-input type="password" clearable="false" v-model="form.password" /></u-form-item>
				<view v-for="(item, index) in 3" :key="index">
					<u-form-item label="问题" prop="question">
						<u-button @click="open(index)">{{ form.question[index] == null ? '选择问题'+(index+1)+'' : form.question[index] }}</u-button>
					</u-form-item>
					<u-form-item label="回答" prop="answer">
						<u-input v-model="form.answer[index]" />
					</u-form-item>
				</view>
				<u-toast ref="uToast" />
				<u-select v-model="show" :list="queList" @confirm="confirm"></u-select>
				<u-button @click="sumbit" type="primary">提交</u-button>
			</u-form>
		</view>
		<view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" title="选择头像" @confirm="confirmAvatar()">
					<view>
						<image :src='item.url' @click="getImg(item.url)" v-for="(item,index) in avatarList" :key='index' style="width:100px;height: 100px;margin:10px " :class="{ active:item.url == avatarImg}"></image>
					</view>	
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import { addUser,getUserMessage,updateUserMessage } from '@/utils/user.js';
import BASE_URL from '../../utils/env.js'
export default {
	data() {
		return {
			form: {
				id:'',
				name: '',
				sex: 1,
				url:'',
				class: '',
				accountNum: '',
				password: '',
				question: {},
				answer: {}
			},
			//问题列表
			queList: [
				{ value: '1', label: '请问你的爸爸生日是多少?' },
				{ value: '2', label: '请问你的妈妈生日是多少?' },
				{ value: '3', label: '请问你的生日是多少?' },
				{ value: '4', label: '请问你的爸爸最喜欢的水果?' },
				{ value: '5', label: '请问你的妈妈最喜欢的水果?' },
				{ value: '6', label: '请问你最喜欢的水果?' },
				{ value: '7', label: '请问你最喜欢的学科是什么?' },
				{ value: '8', label: '请问你最喜欢的书籍是什么?' },
				{ value: '9', label: '请问你最喜欢吃什么菜?' },
				{ value: '10', label: '请问你最喜欢的爱好是什么?' }
			],
			//头像列表
			avatarList:[
				{ url:BASE_URL+'/avatar/ava1.jpg' },
				{ url:BASE_URL+'/avatar/ava2.jpg' },
				{ url:BASE_URL+'/avatar/ava3.jpg' },
				{ url:BASE_URL+'/avatar/ava4.jpg' },
				{ url:BASE_URL+'/avatar/ava5.jpg' },
				{ url:BASE_URL+'/avatar/ava6.jpg' },
			],
			//性别
			sexList: [
				{ value: '1', name: '男', disabled: false },
				{ value: '0', name: '女', disabled: false }
			],
			// 列表展示
			show: false,
			// 默认性别
			defaultSex: '',
			// 选择的问题
			questionBeChoosed: '',
			//是否能够提交
			isSubmit: false,
			//选中的头像
			avatarImg:'',
			//页面标题
			title:'',
		};
	},
	methods: {
		//选择性别
		radioChange(data) {
			this.form.sex = data.value;
		},
		//重置和打开问题
		open(data) {
			this.show = true;
			this.form.question[data] = '选择中';
		},
		//选择问题
		confirm(e) {
			for (let i = 0; i < 3; i++) {
				if (this.form.question[i] == '选择中') {
					this.form.question[i] = e[0].label;
					return;
				}
			}
		},
		//提交
		sumbit() {
			let params = {
				...this.form
			};
			if(this.title == '注册用户'){
				addUser(params).then((res) => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '新增成功',
							type: 'success',
							url: '/pages/tabBar/user/index',
							isTab: true
						});
					}
				});
			}else if(this.title == '修改信息'){
				updateUserMessage(params).then((res) => {
					if(res.code == 200){
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
							url: '/pages/tabBar/user/index',
							isTab: true
						});
					}
				})
			}

		},
		//选择头像
		chose_avatar() {
			this.$refs.alertDialog.open()
		},
		//选中头像
		getImg(data){
			this.avatarImg = data
		},
		//确认头像
		confirmAvatar(){
			this.form.url = this.avatarImg
		}
	},
	onLoad(options){
		if(options.keyWord == 'register'){
			this.title = '注册用户'
		}else{
			this.form.id = options.keyWord
			this.title = '修改信息'
			let params = {
				id:this.form.id
			}
			getUserMessage(params).then((res)=>{
				if(res.code == 200){
					this.form = res.data[0]
					this.form.question = {}
					this.form.answer = {}
					if(res.data[0].sex == 1){
						this.defaultSex = '男'
					}else if(res.data[0].sex == 0){
						this.defaultSex = '女'
					}
				}
			})
		}
	},
	created() {}
};
</script>

<style>
page {
	background-color: #f2f2f2;
}
.content {
	width: 750rpx;
	height: 100vh;
	padding: 20px;
}
.input {
	width: 80px;
}
.active{
	border:red 1px solid;
}
</style>
